﻿<h3>Customer</h3>
<div class="row" style="margin: 10px">
    <div class="media">
        <a class="pull-left" href="#">
            <img data-bind="attr:{src: customer().ImageUrl() }" alt="" style="width: 80px" class="img-polaroid" />
        </a>
        <div class="media-body">
            <h4 data-bind="text: customer().FullName" style="display: inline"></h4>
        </div>
    </div>
</div>
<div class="row" style="margin: 10px">
    <h4>Orders by Customer</h4>
    <table class="table table-hover" data-bind="visible: orders().length > 0">
        <thead>
            <tr>
                <th>Status</th>
                <th>ReferenceId</th>
                <th>Date</th>
                <th>Lines</th>
                <th>Total Amount</th>
                <th>Total Paid</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: orders">
            <tr>
                <td>
                    <img data-bind="attr:{src: IsPending() ? '/Images/openbox.png' : '/Images/closebox.png'}" alt="" style="width: 40px" class="pull-left" /></td>
                <td><a data-bind="attr:{href: '/#order/edit/' + Id()}"><span data-bind="text: ReferenceId"></span></a></td>
                <td><span data-bind="text: CreationDate"></span></td>
                <td><span data-bind="text: OrderLines().length"></span></td>
                <td><span data-bind="text: TotalAmount() + ' €'"></span></td>
                <td><span data-bind="text: TotalPaid() + ' €', style: { color: TotalPaid() < TotalAmount() ? 'red' : 'black' }"></span></td>
            </tr>
        </tbody>
    </table>
    <div class="alert alert-info" data-bind="visible:  orders().length == 0">
        <a>There are no orders from this Customer.</a>
    </div>
</div>
